<script setup lang="ts">
import Container from "@/components/Container.vue";
import China from "@/components/China.vue";
import lineChart from "@/components/lineChart.vue";
import Law_case from "@/components/law_case.vue";
</script>

<template>
<div className="home">
	<Container className="col-1">
    <lineChart />
    <Law_case />
	</Container>

	<Container className="col-2">
    <China style="transform: translate(0, -10%)" />
	</Container>

	<Container className="col-3">

	</Container>
</div>
</template>

<style lang="scss">
.home {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.col-1,
	.col-2,
	.col-3 {
		display: flex;
		width: 29%;
		height: 100%;
	}
  .col-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
	.col-2 {
		width: 40%;
    position: relative;
	}

}
</style>
